import React, { useCallback } from 'react';
import { Image, Text, View } from '@tarojs/components';
import { openPage } from '@UTILS/common'
import { STORE_ROUTER_DATA } from '@CONSTANTS/common'
import { EventsITF } from '@INTERFACES/Events';
import { LanguageType } from '@INTERFACES/Common';
import DBConfig from '@CONFIG/DBConfig'
import Taro from '@tarojs/taro'
import { Analytic_Type } from '@CONSTANTS/analytic'
import style from './PlanGuideGoods.module.scss'

interface Props {
  data: EventsITF[];
  language?: LanguageType
}

const PlanGuideGoods: React.FC<Props> = ({ data, language = 'zh' }) => {
  const onClick = useCallback(() => {
    Taro.tracker.trackEvent(Analytic_Type.tap_pain_manage_store.eventId, { isJoinPlan: '未加入计划' })
    openPage('wmpRoute', STORE_ROUTER_DATA)
  }, [])
  const onClickItem = useCallback(item => {
    const { RouteType, RouteData } = item
    Taro.tracker.trackEvent(Analytic_Type.tap_home_guide_goods.eventId, { RouteType, ...RouteData })
    openPage(RouteType, RouteData)
  }, [])
  if (!Array.isArray(data) || data.length === 0) return null
  return (
    <View className={style.container}>
      <View className={style.titleContainer}>
        <View className={style.line} />
        <Text className={style.title}>管理服务之外，营养补充剂日常必备</Text>
      </View>
      {data.slice(0, 2).map(item => {
        const { BannerFileName, p8Id } = item
        return (
          <View className={style.imageContainer} key={p8Id}>
            <Image
              onClick={() => onClickItem(item)}
              src={`${DBConfig.staticBannerImageUrl}${BannerFileName?.[language]}`}
              className={style.image}
            />
          </View>
        )
      })}
      <View className={style.btnContainer} onClick={onClick}>
        <Text className={style.btnText}>{'点击获取更多商品 >'}</Text>
      </View>
    </View>
  )
}

export default PlanGuideGoods
